@import "@/styles/element-variables";
@import "@/styles/variables";
.card-title {
  vertical-align: top;
  width: 3.7rem;
  height: 100%;
  padding-right: 0.7rem;
  text-align: right;
  display: inline-block;
  font-weight: 600;
  .title-content {
    font-size: 1rem;
  }
  .title-description {
    font-size: 2.2rem;
  }
}

.card-description {
  overflow: hidden;
}
.card-row {
  transition: all 0.3s ease;
  margin-bottom: 0.2rem;
}
@mixin onFocus($color) {
  box-shadow: 1px 1px 3px 1px rgba(0, 0, 0, 0.5);
  border-left: 1rem solid $color;
}
.single-item {
  max-width: 45rem;
  .header {
    transition: all 0.3s ease;
    border-left: 0rem solid $--color-primary;
    &:hover {
      @include onFocus($--color-primary);
    }
    .on-focus {
      @include onFocus($--color-primary);
    }
  }
  .single-content {
    width: 100%;
  }
}
.focus {
  background-color: $--color-primary;
  color: $menuActiveText;
}
